<template>
  <div class="app-container">
    <el-card shadow="always">
      <el-row>
        <div class="one_button">
          <el-col class="right_button">
            <el-button type="success" icon="el-icon-edit" size="small" @click="dropClick">新增试题</el-button>
          </el-col>
        </div>
        <div class="first_row">
          <el-col style="height:60px" class="right_select">
            <span>学科</span>
            <el-select v-model="subjectValue" placeholder="请选择" @change="valueHaveChange">
              <el-option
                v-for="(item,index) in tableData"
                :key="index"
                :label="item.subject"
                :value="item.subject"
              />
            </el-select>
          </el-col>
          <el-col style="height:60px" class="right_select">
            <span>二级目录</span>
            <el-select v-model="twoSubjectValue" placeholder="请选择">
              <el-option
                v-for="item in twoSubjectValueArr"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-col>
          <el-col style="height:60px" class="right_select">
            <span>标签</span>
            <el-select v-model="label" placeholder="请选择">
              <el-option
                v-for="item in tagsValue"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-col>
          <el-col class="left_input">
            <span>关键字</span>
            <el-input v-model="keyword" class="catalogue" />
          </el-col>
        </div>
        <div class="two_row">
          <el-col style="height:60px" class="right_select">
            <span>试题类型</span>
            <el-select v-model="type" placeholder="请选择">
              <el-option
                v-for="item in questionType"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col style="height:60px" class="right_select">
            <span>难度</span>
            <el-select v-model="difficultyValue" placeholder="请选择">
              <el-option
                v-for="item in difficulty"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col style="height:60px" class="right_select">
            <span>方向</span>
            <el-select v-model="direction" placeholder="请选择">
              <el-option
                v-for="item in directionValue"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col style="height:60px" class="right_select">
            <span>录入人</span>
            <el-select v-model="user" placeholder="请选择">
              <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="item.creator"
                :value="item.id"
              />
            </el-select>
          </el-col>
        </div>
        <div class="thrid_row">
          <el-col class="left_input">
            <span>题目备注</span>
            <el-input v-model="remarksValue" class="catalogue" />
          </el-col>
          <el-col class="left_input">
            <span>企业简称</span>
            <el-input v-model="shortName" class="catalogue" />
          </el-col>
          <div class="four_row">
            <el-col class="left_input">
              <span>城市</span>
              <el-select
                v-model.trim="form.provinces"
                placeholder="请选择"
                class="select_one"
                @change="changeFn"
              >
                <el-option
                  v-for="(item, index) in provincesList"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
              <el-select v-model="form.citys" placeholder="请选择" class="select_one">
                <el-option
                  v-for="(item, index) in citysList"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-col>
          </div>
          <div class="two_button">
            <el-button @click="clearClick">清除</el-button>
            <el-button type="primary" @click="searchClick">搜索</el-button>
          </div>
        </div>

      </el-row>

      <div class="alert" closable="false">
        <el-alert :closable="false" :title="`数据一共${page.counts}条`" type="info" show-icon />
      </div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="180" />
        <el-table-column prop="subject" label="学科" width="180" />
        <el-table-column prop="catalog" label="目录" />
        <el-table-column prop="questionType" label="题型" />
        <el-table-column prop="question" label="题干">
          <template v-slot="{row}">
            <p v-html="row.question" />
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
          <template v-slot="{row}">
            {{ row.addDate | formatDate }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" />
        <el-table-column prop="creator" label="录入人" />
        <el-table-column label="操作" sortable="" fixed="right" width="250">
          <template v-slot="{row}">
            <el-button type="primary" size="small" icon="el-icon-view" circle @click="previewClick(row)" />
            <el-button type="success" size="small" icon="el-icon-edit" circle @click="$router.push('/testing/testInput')" />
            <el-button type="danger" size="small" icon="el-icon-delete" circle @click="delClick(row)" />
            <el-button type="warning" size="small" icon="el-icon-check" circle @click="joinSelected(row)" />
          </template>
        </el-table-column>
      </el-table>
      <!-- 放置分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height:60px">
        <el-pagination
          :current-page="page.page*1"
          :page-size="page.pagesize*1"
          :total="page.counts"
          layout="prev,pager,next"
          @current-change="changePage"
        />
      </el-row>
    </el-card>
    <PreviewDialog :is-preview-dialog.sync="isPreviewDialog" :row-list="rowList" />
  </div>
</template>
<script>
import { basisTestingAPI, deleteBasisTestingAPI, joinSelectedAPI } from '@/api/index'
import { provinces, citys } from '@/assets/city'
import PreviewDialog from './components/Preview-dialog.vue'
export default {
  name: 'TableLayout',
	components: {
		PreviewDialog
	},
  data() {
    return {
      provincesList: provinces(), // 城市
      citysList: [], // 地区
      form: {
        provinces: '', // 城市
        citys: '' // 地区
      },
      activeNames: '',
      ruleForm: {},
      rules: {},
      subjectValue: '', // 学科绑定的数据
      twoSubjectValue: '', // 二级目录绑定的数据
      label: '', // 标签绑定的数据
      type: '', // 题型绑定的数据
      difficultyValue: '', // 难度绑定的数据
      direction: '', // 方向绑定的数据
      user: '', // 录入人绑定的数据
			remarksValue: '', // 题目备注绑定的数据
			keyword: '', // 关键字绑定的数据
			shortName: '', // 企业简称绑定的数据
      directionValue: [
        {
          id: '1',
          label: 'o2o'
        }, {
          id: '2',
          label: '外包服务'
        }, {
          id: '3',
          label: '企业服务'
        }, {
          id: '4',
          label: '互联网金融'
        }, {
          id: '5',
          label: '企业咨询'
        }, {
          id: '6',
          label: '互联网'
        }, {
          id: '7',
          label: '电子商务'
        }, {
          id: '8',
          label: '其他'
        }
      ],
			difficulty: [
        {
          id: '1',
          label: '简单'
        }, {
          id: '2',
          label: '一般'
        }, {
          id: '3',
          label: '困难'
        }
      ],
			questionType: [
        {
          id: '1',
          label: '单选'
        }, {
          id: '2',
          label: '多选'
        }, {
          id: '3',
          label: '简答'
        }
      ],

      tableData: [],
			value: '',
			page: { // 声明一个对象，保存分页的数据
				page: 1,
				pagesize: 10,
				counts: 0,
				keyword: '',
				pages: 0
			},
			difficultyArr: [],
			isPreviewDialog: false, // 控制预览按钮弹出层的显示
			rowList: {}, // 用来保存当前行的数据
			twoSubjectValueArr: [], // 专门用来保存二级目录的数据
			tagsValue: [] // 专门用来保存当前学科下的所有标签
    }
  },
	created() {
		this.getLabelTags()
	},
  methods: {
		//  请求题库的列表数据
		async	getLabelTags() {
			const { page, counts, pagesize, pages, items } = await basisTestingAPI(this.page)
				this.page.page = page
				this.page.pages = pages
				this.page.counts = counts
				this.page.pagesize = pagesize
				this.tableData = items
				this.difficulty.forEach(item => {
						this.tableData.forEach(obj => {
							if (obj.difficulty === item.id) {
								obj.difficulty = item.label
							}
						})
				})
				// 转化题型
				this.tableData.forEach(item => {
					if (item.questionType === '1') {
						item.questionType = '单选题'
					} else if (item.questionType === '2') {
						item.questionType = '多选题'
					} else {
						item.questionType = '简答题'
					}
				})

		},
		/**
		 * 点击分页按钮，切换分页
		 * **/
		changePage(newpage) {
			this.page.page = newpage
			this.getLabelTags()
		},
		// 当学科的值发生改变，监听目录的值随之改变
		valueHaveChange() {
			// 生成二级目录
				const arr = []
				const arr1 = []
				this.tableData.forEach(item => {
					if (item.subject === this.subjectValue) {
						return	arr.push(item.catalog)
					}
					if (item.subject === this.subjectValue) {
						return arr1.push(item.tags)
					}
				})
				this.twoSubjectValueArr = arr;
				this.tagsValue = arr1
		},
		//  选择城市的方法
    changeFn() {
      // 获取地区赋值给本地
      this.citysList = citys(this.form.provinces)
    },
		// 点击预览按钮，弹出预览弹出层，查看
		previewClick(row) {
			this.rowList = row
			this.isPreviewDialog = true
		},
		// 点击删除按钮，删除当前行的数据
		async delClick(row) {
			try {
				await this.$confirm('确定要删除该文章吗？')
				await deleteBasisTestingAPI(row.id)
				this.getLabelTags()
				this.$message.success('删除成功！')
			} catch (err) {
				console.log(err);
			}
		},
		// 点击新增文章按钮，跳转路由
		dropClick() {
			this.$router.push('/testing/testInput')
		},
		// 点击搜索按钮，根据条件搜索内容
		async searchClick() {
			const { counts, pagesize, pages, items } = await basisTestingAPI({
				subjectID: this.subjectValue,
				tags: this.label,
				keyword: this.keyword,
				questionType: this.type,
				difficulty: this.difficultyValue,
				direction: this.direction,
				creatorID: this.user,
				remarks: this.remarksValue,
				shortName: this.shortName,
				province: this.form.provinces,
				city: this.form.citys
			})
				this.page.page = pages
				this.page.counts = counts
				this.page.pagesize = pagesize
				this.tableData = items
		},
		// 点击清除按钮，清除全部的搜索条件
		clearClick() {
				this.subjectValue = ''
				this.label = ''
				this.keyword = ''
				this.type = ''
				this.difficultyValue = ''
				this.direction = ''
				this.user = ''
				this.remarksValue = ''
				this.shortName = ''
				this.form.provinces = ''
				this.form.citys = ''
				this.getLabelTags()
		},
		// 点击加入精选，将当前行加入精选,1是加入精选
		async joinSelected(row) {
			const res = await joinSelectedAPI(row.id, 1)
			console.log(res);
		}

  }
}
</script>

<style lang='scss' scoped>
.app-container{
	padding: 15px;
}
::v-deep .el-card__body{
	padding-top: 3px;
}
.one_button{
	width: 100%;
	height: 50px;
	line-height: 50px;
	padding-right: 22px;
}
.left_input{
	float: left;
	width: 260px;
	span{
		font-size: 15px;
		font-weight: normal;
	}
}
span{
	font-weight: 600;
	margin-right: 20px;
}
::v-deep .el-input{
	width: 200px;
	height: 50px;
}
.right_select{
	float: left;
	width: 260px;
}
.right_select span{
	font-size: 15px;
	font-weight: normal;
}
.right_button{
	float: right;
	width: 32px;
	margin-right: 80px;
}
::v-deep .el-input__inner{
	height: 30px;
}
::v-deep .el-select__caret{
	line-height: 30px;
}
.first_row{
	width: 100%;
	height: 50px;
	line-height: 50px;
	.right_select, .left_input{
		width: 25%;
		height: 50px !important;
		span{
			display: inline-block;
			width: 60px;
			height: 50px;
			text-align: right;
		}
	}
}
.two_row{
	width: 100%;
	height: 50px;
		line-height: 50px;

	.right_select, .left_input{
		float: left;
		width: 25%;
		height: 50px !important;
		span{
			display: inline-block;
			width: 60px;
			height: 50px;
			text-align: right;
		}
	}
}
.thrid_row{
	overflow: hidden;
	width: 100%;
	height: 50px;
	line-height: 50px;
	margin-bottom: 10px;
	.right_select, .left_input{
		float: left;
		width: 25%;
		height: 50px !important;
		span{
			display: inline-block;
			width: 60px;
			height: 50px;
			text-align: right;
		}
	}
}
.four_row{
	width: 28%;
	height: 50px;
	float: left;
	.left_input{
		float: left;
		width: 100%;
		.select_one, .select_two{
			width: 100px;
			margin-right: 4px;
			::v-deep .el-input{
				width: 100px !important;
			::v-deep .el-input__inner{
				width: 100px !important;
			}
			}
		}
	}
}
.two_button{
	width: 160px;
	height: 50px;
	float: right;
	margin-right: 27px;
}

.el-button--danger {
	color: #f56c6c;
	background: #fef0f0;
	border-color: #fbc4c4;
}

.el-button--warning {
	color: #e6a23c;
	background: #fdf6ec;
	border-color: #f5dab1;
}
</style>

